import React, { useEffect, useState, memo } from 'react';
import { connect } from 'react-redux';
import { cartDetail, cartRelated, addCartAction, addCollectAction, addToCart } from '../../store/actions';
import style from './index.module.scss';
import { useHistory } from 'react-router';
//子组件
import Header from '../../components/Header';
import NewGoods from '../../components/NewGoods';
import CarouselComponent from '../../components/CarouselComponent';
const WrapHeader = memo(Header);
const WrapNewGoods = memo(NewGoods);
const WrapCarousel = memo(CarouselComponent);

interface Iprops {
    getInfo: (id: number) => void,
    getRelated: (id: number) => void,
    getCart: () => void,
    addCart: (goodsId: string, number: string, productId: string) => void,
    addCollect: (typeId: string, valueId: string) => void,
    match: any,
    goodsInfo: { [key: string]: any },
    cartTotal: { [key: string]: any },
    goodsList: Array<object>,
    type: string
}

const Addcart: React.FC<Iprops> = props => {
    const history = useHistory();
    const { match: { params: { id } } } = props;
    useEffect(() => {
        props.getInfo(id)
        props.getRelated(id)
        props.getCart()
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [id])
    const [modal, setModal] = useState(false);
    const [number, setNumber] = useState(0);
    const { info, attribute, gallery, comment, userHasCollect, productList } = props.goodsInfo;
    const collect = () => {
        props.addCollect('0', info && info.id);
        props.getInfo(info && info.id)
    }
    const reduce = () => {
        if (number < 1) return;
        setNumber(number - 1);
    }
    const toCart = () => {
        props.addCart(info && info.id, `${number}`, productList[0].id);
        props.getCart()
    }

    return <div className={style.addcart}>
        {
            modal
                ?
                <div className={style.dialog}>

                    <div className={style.mask} onClick={() => setModal(false)}>
                    </div>
                    <div className={style.tip}>
                        <span className={style.close} onClick={() => setModal(false)}>x</span>
                        <div className={style.maskTitle}>
                            <div className={style.maskLeft}>
                                {
                                    gallery && gallery.length > 0
                                        ?
                                        <img src={gallery && gallery[0].img_url} alt="" />
                                        :
                                        null
                                }
                            </div>
                            <div className={style.maskRight}>
                                <p>
                                    <label>单价：</label> <b>￥{info && info.retail_price}</b>
                                </p>
                                <p>
                                    <label>库存：</label> <b>{info && info.goods_number}{info && info.goods_unit}</b>
                                </p>
                                <p>
                                    <label>已选择：</label>
                                </p>
                            </div>
                        </div>
                        <div className={style.maskContent}>
                            <div className={style.maskMsg}>
                                数量
                        </div>
                            <div className={style.maskHandle}>
                                <span onClick={reduce}>-</span>
                                <span>{number}</span>
                                <span onClick={() => setNumber(number + 1)}>+</span>
                            </div>
                        </div>
                        <div className={style.maskFooter}>
                            <button onClick={toCart}>加入购物车</button>
                            <button>立即下单</button>
                        </div>
                    </div>
                </div>
                :
                null
        }
        <WrapHeader title={info && info.name} />
        <div className={style.content}>
            <div className={style.frame}>
                <WrapCarousel banner={gallery && gallery} height="400" />
            </div>
            <div className={style.merit}>
                <span><b>★</b> 30天无忧退货</span>
                <span><b>★</b> 48小时快速退款</span>
                <span><b>★</b> 满88元免邮费</span>
            </div>
            <div className={style.goods}>
                <h2>{info && info.name}</h2>
                <p>{info && info.goods_brief}</p>
                <p>￥ {info && info.retail_price}</p>
                <div className={style.add}>
                    <b>x {number}</b> <span onClick={() => setModal(true)}>选择规格 <i className="iconfont icon-youjiantou-01" /></span>
                </div>
            </div>
            {
                comment && Object.keys(comment.data).length > 0
                    ?
                    <div className={style.comment}>
                        <span>评论 ({comment && comment.count})</span>
                        <span>查看全部 </span>
                        <i className="iconfont iconfont icon-youjiantou-01" />
                    </div>
                    :
                    null
            }
            {
                comment && Object.keys(comment.data).length > 0
                    ?
                    <div className={style.wrapItem}>
                        <div className={style.wrapItemTitle}>
                            <span>匿名用户</span>
                            <span>{comment.data.add_time}</span>
                        </div>
                        <div className={style.wrapItemContent}>{comment.data.content}</div>
                        <div className={style.wrapItemImg}>
                            {
                                comment.data.pic_list.map((v: any) => {
                                    return <img key={v.id} src={v.pic_url} alt="" />
                                })
                            }
                        </div>
                    </div>
                    :
                    null

            }
            <div className={style.title}>
                —— 商品参数 ——
            </div>
            {
                attribute && Object.keys(attribute).length > 0
                    ?
                    <div className={style.params}>
                        {
                            attribute && attribute.map((item: any, index: number) => {
                                return <p key={index}>
                                    <span>{item.name}</span>
                                    <span>{item.value}</span>
                                </p>
                            })
                        }
                    </div>
                    :
                    null
            }
            <div className={style.img}>
                <div dangerouslySetInnerHTML={{ __html: info && info.goods_desc }}></div>
            </div>
            <div className={style.title}>
                —— 常见问题 ——
            </div>
            {
                props.goodsInfo.issue && props.goodsInfo.issue.map((item: { [key: string]: any }) => {
                    return <div
                        className={style.questionItem}
                        key={item.id}
                    >
                        <h3><b>✓</b> {item.question}</h3>
                        <p>{item.answer}</p>
                    </div>
                })
            }
            <div className={style.title}>
                —— 大家都在看 ——
        </div>
            <WrapNewGoods newGoodsList={props.goodsList} titleFlag={false} />
        </div>
        <div className={style.footer}>
            <div><i className="iconfont icon-shoucang" style={{ "color": userHasCollect === 0 ? "" : "gold" }} onClick={collect} /></div>
            <div>
                <i className="iconfont icon-gouwuche" style={{ color: "#2196f3" }} onClick={() => history.replace('/main/cart')} />
                <span className={style.number}>{props.cartTotal && props.cartTotal.goodsCount}</span>
            </div>
            <div><button onClick={() => setModal(true)}>加入购物车</button></div>
            <div><button>立即购买</button></div>
        </div>
    </div>
}
const mapStateToProps = (state: any) => {
    return state.home
}
const mapDispatchToProps = (dispatch: Function) => {
    return {
        getInfo: (id: number) => {
            dispatch(cartDetail(id));
        },
        getRelated: (id: number) => {
            dispatch(cartRelated(id))
        },
        getCart: () => {
            dispatch(addCartAction());
        },
        addCollect: (typeId: string, valueId: string) => {
            dispatch(addCollectAction(typeId, valueId));
        },
        addCart: (goodsId: string, number: string, productId: string) => {
            dispatch(addToCart(goodsId, number, productId));
        },
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(Addcart) 
